<template>
  <div class="info-container">
    <div class="info-container_body">
      <el-form ref="refFrom" label-position="top" class="demo">
        <div class="form-section">
          <div class="form-section_title">查询订单</div>

          <div class="page-container main">
            <div class="tool-container">
              <el-form class="tool-search" :model="queryParams" ref="queryFormRef" :inline="true">
                <!-- <el-form-item>
                  <RegionSelect v-model="regionCode" placeholder="行政区域" clearable />
                </el-form-item> -->

                <el-form-item>
                  <el-select
                    v-model="queryParams.stationId"
                    filterable
                    clearable
                    remote
                    reserve-keyword
                    placeholder="站房名称"
                    remote-show-suffix
                    :remote-method="queryStationList"
                    :loading="loading"
                    style="width: 240px"
                  >
                    <el-option v-for="item in stations" :key="item.stationId" :label="item.name" :value="item.stationId" />
                  </el-select>
                </el-form-item>
                <!-- <el-form-item>
                  <el-date-picker
                    v-model="times"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD hh:mm:ss"
                    value-format="YYYY-MM-DD hh:mm:ss"
                  />
                </el-form-item> -->

                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <div class="tabel-container myTable">
              <vxe-table ref="tableRef" :data="tableData" v-loading="loading">
                <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable>
                  <template #default="{ row }">
                    <el-checkbox :ref="row.id" size="large" v-model="row.checked" @change="select(row)" />
                  </template>
                </vxe-table-column>
                <vxe-table-column :resizable="true" field="stationName" title="站房名称" sortable> </vxe-table-column>
                <vxe-table-column :resizable="true" field="regionName" title="区域" sortable> </vxe-table-column>
                <vxe-table-column :resizable="true" field="deviceNo" title="设备编号" sortable> </vxe-table-column>
                <vxe-table-column :resizable="true" field="deviceType" title="设备类型" sortable>
                  <template #default="{ row }">
                    {{marchType(row.deviceType,deviceTypes)}}
                  </template>
                </vxe-table-column>
                <vxe-table-column :resizable="true" field="errorReasonPlain" title="故障原因" sortable> </vxe-table-column>
                <vxe-table-column :resizable="true" field="createTime" title="创建时间" sortable> </vxe-table-column>
                <vxe-table-column :resizable="true" field="contactUser" title="创建人" sortable> </vxe-table-column>
              </vxe-table>
            </div>
            <div class="myPager">
              <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </div>
        </div>
        <div class="form-section">
          <div class="form-section_title">已选订单</div>

          <vxe-table ref="tableRef" :data="items" v-loading="loading">
            <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable>
              <template #default="{ row }">
                <el-checkbox :ref="row.id" size="large" v-model="row.checked" @change="select(row)" />
              </template>
            </vxe-table-column>
            <vxe-table-column :resizable="true" field="stationName" title="站房名称" sortable> </vxe-table-column>
            <vxe-table-column :resizable="true" field="regionName" title="区域" sortable> </vxe-table-column>
            <vxe-table-column :resizable="true" field="deviceNo" title="设备编号" sortable> </vxe-table-column>
            <vxe-table-column :resizable="true" field="deviceType" title="设备类型" sortable>
              <template #default="{ row }">
                {{marchType(row.deviceType,deviceTypes)}}
              </template>
            </vxe-table-column>
            <vxe-table-column :resizable="true" field="errorReasonPlain" title="故障原因" sortable> </vxe-table-column>
            <vxe-table-column :resizable="true" field="createTime" title="创建时间" sortable> </vxe-table-column>
            <vxe-table-column :resizable="true" field="contactUser" title="创建人" sortable> </vxe-table-column>
            <vxe-table-column :resizable="true" type="id" title="操作" sortable>
              <template #default="{ row }">
                <el-button link type="danger" @click="del(row)">删除</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { listUser } from '@/api/system/user/index';
import { listStation } from '@/api/station/index';
import { listStationDevice } from '@/api/device/index';

export default {
  props: {
    data: {}
  },
  computed: {
    times: {
      get() {
        return [this.item.startFrom, this.item.endTo];
      },
      set(value) {
        this.item.startFrom = value[0];
        this.item.endTo = value[1];
      }
    },

    regionCode: {
      get() {
        return this.item.regionCode;
      },
      set(value) {
        this.item.regionCode = value;
      }
    },

    items: {
      get() {
        return this.item.devices;
      },
      set(value) {
        this.item.devices = value;
      }
    }
  },
  data() {
    return {
      loading: false,
      active: 1,
      total: 0,
      queryParams: {
        regionCode: '',
        // status: '1',
        name: '',
        startFrom: '',
        endTo: '',
        createBy: '',
        pageNum: 1,
        pageSize: 5
      },
      deviceTypes: [
        { label: '供氧终端', value: '1' },
        { label: '充氧终端', value: '2' },
        { label: '泄漏检测终端', value: '3' },
        { label: '制氧机', value: '4' },
        { label: '氧气储罐', value: '5' },
        { label: '智能电表', value: '6' }
      ],
      tableData: [],
      users: [],
      stations: [],
      item: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.item = this.data;
      //this.getList();
    },

    getList() {
      if (this.item.regionCode == '') {
        ElMessage.warning('请选择行政区划');
        return;
      }
      if (this.item.startFrom == '') {
        ElMessage.warning('请选择时间范围');
        return;
      }
      listStationDevice(this.queryParams)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 获取用户列表
     */
    queryUserList(name) {
      listUser({ nickName: name }).then((res) => {
        if (res.code == 200) {
          this.users = res.rows;
        }
      });
    },

    /**
     * 获取站房名称
     */
    queryStationList(name) {
      listStation({ name: name }).then((res) => {
        if (res.code == 200) {
          this.stations = res.rows;
        }
      });
    },

    /**
     * 选中数据
     */
    select(row) {
      let checked = row.checked;
      if (checked) this.item.devices.push(row);
      else this.del(row);
    },

    /**
     * 移除
     */
    del(row) {
      let id = row.deviceId;
      let items = this.item.devices;
      for (let i = 0; i < items.length; i++) {
        if (items[i].deviceId == id) {
          items.splice(i, 1);
          break;
        }
      }

      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].deviceId == id) {
          this.tableData[i].checked = false;
          break;
        }
      }
    },

    handleCancel() {
      //   this.$emit('hideRight');
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>